import { Form, Input, Button, Select, Card } from 'antd';

// 下拉菜单
const { Option } = Select;

const CardItem = (props) => {

    // form 表单useForm方法 获取 form表单实例
    const [form] = Form.useForm();

    const { itemList, title, getCardInfo } = props;

    const onFinish = (data) => {

        getCardInfo(data)

        // 提交后将表单重置
        form.resetFields();
    }


    return <Card title={title}>
        <Form
            name="basic"
            onFinish={onFinish} // 表单验证成功的回调函数
            autoComplete="off"
            form={form}
        >

            {
                itemList.length && itemList.map((item, idx) => {
                    return <Form.Item
                        label={item.label}
                        name={item.name}
                        rules={item.rules ? item.rules : [{
                            required: true,
                            message: 'Please input your username!',
                        }]}
                        key={idx}
                    >
                        {
                            item.type === 'Input' ? <Input /> :
                                <Select
                                    mode={item.mode || ''}
                                >
                                    {
                                        item.option.map((val, i) => {
                                            return <Option key={i} value={val.value}>{val.label}</Option>
                                        })
                                    }
                                </Select>
                        }
                    </Form.Item>
                })
            }

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </Form.Item>

        </Form>

    </Card>
}

export default CardItem